// src/pages/inspection/InstrumentManage.vue
<template>
	<div class="instrument-manage">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>检验器具管理</span>
					<div>
						<el-button type="primary" size="small" @click="openDialog('add')">新增器具</el-button>
					</div>
				</div>
			</template>

			<el-table :data="instrumentList" stripe border>
				<el-table-column prop="code" label="仪器编号" width="120" />
				<el-table-column prop="name" label="仪器名称" width="160" />
				<el-table-column prop="protocol" label="数据协议" />
				<el-table-column prop="workshop" label="车间" />
				<el-table-column prop="process" label="工序" />
				<el-table-column prop="remark" label="备注" />
				<el-table-column prop="image" label="图片" width="120">
					<template #default="scope">
						<el-image v-if="scope.row.image" :src="scope.row.image"
							style="width: 60px; height: 60px; object-fit: cover" :preview-src-list="[scope.row.image]"
							preview-teleported />
						<span v-else style="color: #aaa">无</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="仪器编号">
					<el-input v-model="form.code" />
				</el-form-item>
				<el-form-item label="仪器名称">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="数据协议">
					<el-input v-model="form.protocol" />
				</el-form-item>
				<el-form-item label="车间">
					<el-input v-model="form.workshop" />
				</el-form-item>
				<el-form-item label="工序">
					<el-input v-model="form.process" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.remark" type="textarea" />
				</el-form-item>
				<el-form-item label="仪器图片">
					<el-upload class="upload-demo" action="#" :auto-upload="false" :on-change="handleImageChange"
						:show-file-list="false">
						<el-button size="small">选择图片</el-button>
					</el-upload>
					<div v-if="form.image" style="margin-top: 10px">
						<el-image :src="form.image" style="width: 100px; height: 100px" />
					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { ref } from 'vue'

export default {
	setup() {
		const instrumentList = ref([
			{
				code: 'EQ001',
				name: '万能材料试验机',
				protocol: 'MODBUS',
				workshop: '力学车间',
				process: '抗拉测试',
				remark: '高精度',
				image: ''
			},
			{
				code: 'EQ002',
				name: '金属光谱仪',
				protocol: '自定义协议',
				workshop: '理化中心',
				process: '成分分析',
				remark: '',
				image: ''
			},
			{
				code: 'EQ003',
				name: '电热鼓风干燥箱',
				protocol: '485串口',
				workshop: '化学实验室',
				process: '样品预处理',
				remark: '',
				image: ''
			},
			{
				code: 'EQ004',
				name: '混凝土搅拌机',
				protocol: 'PLC通信',
				workshop: '混凝土中心',
				process: '配比搅拌',
				remark: '带自动计量',
				image: ''
			},
			{
				code: 'EQ005',
				name: '压力试验仪',
				protocol: 'CAN总线',
				workshop: '力学车间',
				process: '抗压测试',
				remark: '',
				image: ''
			},
			{
				code: 'EQ006',
				name: '渗透测试仪',
				protocol: 'MODBUS',
				workshop: '防水实验室',
				process: '防渗性能检测',
				remark: '支持远程读取',
				image: ''
			},
			{
				code: 'EQ007',
				name: '电子天平',
				protocol: 'USB直连',
				workshop: '理化中心',
				process: '质量称量',
				remark: '',
				image: ''
			},
			{
				code: 'EQ008',
				name: '热导率测试仪',
				protocol: 'MODBUS',
				workshop: '节能检测室',
				process: '热性能检测',
				remark: '带恒温控制',
				image: ''
			},
			{
				code: 'EQ009',
				name: '耐磨试验机',
				protocol: '自定义协议',
				workshop: '地坪实验区',
				process: '磨损试验',
				remark: '',
				image: ''
			},
			{
				code: 'EQ010',
				name: '盐雾腐蚀箱',
				protocol: 'TCP/IP',
				workshop: '环境模拟区',
				process: '加速腐蚀测试',
				remark: '远程联网',
				image: ''
			}
		])


		const dialogVisible = ref(false)
		const dialogTitle = ref('')
		const form = ref({})
		const currentIndex = ref(-1)

		const openDialog = (type, row) => {
			dialogTitle.value = type === 'add' ? '新增器具' : '编辑器具'
			dialogVisible.value = true
			if (type === 'edit') {
				form.value = { ...row }
				currentIndex.value = instrumentList.value.findIndex(i => i.code === row.code)
			} else {
				form.value = { code: '', name: '', protocol: '', workshop: '', process: '', remark: '', image: '' }
				currentIndex.value = -1
			}
		}

		const handleImageChange = (file) => {
			const reader = new FileReader()
			reader.onload = e => {
				form.value.image = e.target.result
			}
			reader.readAsDataURL(file.raw)
		}

		const submitForm = () => {
			if (currentIndex.value >= 0) {
				instrumentList.value[currentIndex.value] = { ...form.value }
			} else {
				instrumentList.value.push({ ...form.value })
			}
			dialogVisible.value = false
		}

		const deleteRow = (row) => {
			instrumentList.value = instrumentList.value.filter(i => i.code !== row.code)
		}

		const importExcel = () => {
			alert('此为纯前端系统，模拟点击导入 Excel，无实际上传处理')
		}

		return {
			instrumentList,
			dialogVisible,
			dialogTitle,
			form,
			openDialog,
			handleImageChange,
			submitForm,
			deleteRow,
			importExcel
		}
	}
}
</script>

<style scoped>
.instrument-manage {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}
</style>
